﻿Vue.component('finance-recv-due-edit', {
	data: function () {
		return {
			popVisible: this.visible,
			listData: this.list
		};
	},
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		vresult: {
			type: Boolean,
			default: false
		},
		vname: {
			type: String
		},
		relatedid: {
			type: String
		},
		model: {
			type: Object
		},
		list: {
			type: Array
		}
	},
	watch: {
		'vresult': function (newVal) {
			if (newVal) {
				this.doSubmit();
			}
		},
		"list": function (newVal) {
			this.listData = newVal;
			var self = this;
			setTimeout(function () {
				self.initCalander();
			}, 100);
		}
	},
	methods: {
		handleSubmit: function (e) {
			var totalDiff = this.listData.reduce(function (total, cur) {
				return math.bignumber(total).sub(math.bignumber(cur.TotalRecvDue));
			}, this.model.TotalRecvDue);
			totalDiff = parseFloat(math.format(totalDiff, { notation: 'fixed', precision: 2 }));
			if (totalDiff > 0) {
				utils.alert('应收款金额没有达到总金额');
				return;
			} else if (totalDiff < 0) {
				utils.alert('应收款金额超出总金额');
				return;
			}
			var $form = $(e.currentTarget).parents('form');
			$form.submit();
		},
		doSubmit: function () {
			var self = this;
			var paramData = Object.assign({}, self.listData);
			this.$emit('complete', { result: "SUBMIT", model: paramData });
		},
		doCancel: function () {
			this.popVisible = false;
			this.$emit('complete', { result: 'CANCEL' });
		},
		handleChange: function (e) {
			//var obj = e.currentTarget;
			//this.$emit('change', { name: obj.name, value: obj.value });
			var obj = e.currentTarget;
			this.listData = Object.assign({}, this.modelData, {
				[obj.name]: obj.value
			});
		},
		handleAdd: function () {
			var self = this;
			var totalDue = this.listData.reduce(function (total, cur) {
				return math.bignumber(total).add(math.bignumber(cur.TotalRecvDue));
			}, 0);
			totalDue = parseFloat(math.format(totalDue, { notation: 'fixed', precision: 2 }));
			if (totalDue < this.model.TotalRecvDue) {
				this.listData.push(Object.assign({}, this.model, {
					Stage: (this.listData.length + 1).toString(),
					TotalRecvDue: (this.model.TotalRecvDue - totalDue).toFixed(2)
				}));
			}
		},
		handleDelete: function (item, idx) {
			this.listData.splice(idx, 1);
		},
		initCalander: function () {
			var self = this;
			$('.finance-recv-due-edit .calendar-tgr').each(function (eidx, elem) {
				var $this = $(elem);
				var input = $this.prev('input')[0];
				$this.click(function () {
					laydate.render({
						elem: input
						, show: true //直接显示
						, closeStop: $this[0]
						, done: function (value, date) {
							var idx = parseInt(input.dataset.idx, 10);
							var newData = Object.assign({}, self.listData[idx], {
								[input.name]: value
							});
							self.listData.splice(idx, 1, newData);
						}
					});
				});
			});

			$('.finance-recv-due-edit .calendar').each(function (eidx, elem) {
				var $this = $(elem);
				var input = $this[0];
				laydate.render({
					elem: input
					, closeStop: $this.next('i')[0]
					, done: function (value, date) {
						var idx = parseInt(input.dataset.idx, 10);
						var newData = Object.assign({}, self.listData[idx], {
							[input.name]: value
						});
						self.listData.splice(idx, 1, newData);
					}
				});
			});
		}
	},
	computed: {
		debug: function () {
			return /\/\/localhost|\/\/127.0.0.1/i.test(location.href) || /[\?&]debug=true/.test(location.search);
		}
	},
	mounted() {
	},
	filters: {
	},
	template: '<div class="windLayerDiv finance-recv-due-edit" style="display: none;" v-show="popVisible">\
		<table class="windLayerHeadingULine table100" cellpadding="3" cellspacing="0" >\
		<tr class="windLayerHeadingTr">\
			<td width="80%" style="cursor: move;" class="windLayerHeading" align="left">\
				应收款\
			</td>\
			<td align="right">\
				<input class="windLayerBtclose" type="button" title="关闭" @click.prevent="doCancel">&nbsp;&nbsp;\
			</td>\
		</tr>\
	</table>\
		<form class="validation-engine" :data-validate="vname">\
			<table style="background-color: rgb(234, 234, 234);width:100%;" class="small" border="0" cellpadding="3" cellspacing="1">\
			<tr bgcolor="white" height="25px;" style="">\
				<td class="windLayerTitle" style="text-align:right;">\
					往来单位\
				</td>\
				<td class="windLayerInfo" style="">\
					<input type="text" :value="model.PartnerName" readonly class="read-only" style="width:80%;" />\
				</td>\
			</tr>\
			<tr bgcolor="white" height="25px;" style="" v-if="model.InOrderID>0">\
				<td class="windLayerTitle" style="text-align:right;">\
					销售订单\
				</td>\
				<td class="windLayerInfo" style="">\
					<input type="text" :value="model.InOrderSNo" readonly class="read-only" style="width:80%;" />\
				</td>\
			</tr>\
			<tr bgcolor="white" height="25px;" style="" v-if="model.OutBackID>0">\
				<td class="windLayerTitle" style="text-align:right;">\
					采购退货单\
				</td>\
				<td class="windLayerInfo" style="">\
					<input type="text" :value="model.OutBackSNo" readonly class="read-only" style="width:80%;" />\
				</td>\
			</tr>\
			<tr bgcolor="white" height="25px;" style="">\
				<td class="windLayerTitle" style="text-align:right;">\
					总金额\
				</td>\
				<td class="windLayerInfo" style="">\
					<input type="text" :value="model.TotalRecvDue" readonly class="read-only" style="width:80%;" />\
				</td>\
			</tr>\
			<tr>\
			<td colspan="2">\
			<table style="background-color: rgb(234, 234, 234);width:100%;" class="small" border="0" cellpadding="3" cellspacing="1">\
			<tr bgcolor="white" height="25px;">\
				<td class="windLayerTitle" style="width:19%;text-align:center;">\
					期次\
				</td>\
				<td class="windLayerTitle" style="width:19%;text-align:center;">\
					应收款时间\
				</td>\
				<td class="windLayerTitle" style="width:19%;text-align:center;">\
					应收款金额\
				</td>\
				<td class="windLayerTitle" style="width:19%;text-align:center;">\
					是否需要开发票\
				</td>\
				<td class="windLayerTitle" style="width:19%;text-align:center;">\
					备注\
				</td>\
				<td class="windLayerTitle" style="width:19%;text-align:center;">\
					删除\
				</td>\
			</tr>\
			<tr bgcolor="white" height="25px;" v-for="(ditem,didx) in listData">\
				<td class="windLayerInfo" style="border-bottom: none;">\
					<input type="text" style="width:90%;" v-model="ditem.Stage" />\
				</td>\
				<td class="windLayerInfo" style="border-bottom: none;">\
					<input type="text" style="width:70px;cursor:pointer;" class="calendar " :value="ditem.DueDate" name="DueDate" :data-idx="didx" />\
					<i class="icon-calendar calendar-tgr"></i>\
				</td>\
				<td class="windLayerInfo" style="border-bottom: none;">\
					<input type="number" style="width:90%;" v-model="ditem.TotalRecvDue" />\
				</td>\
				<td class="windLayerInfo" style="border-bottom: none;text-align:center;">\
					<input type="checkbox" v-model="ditem.Invoice"/>开发票\
				</td>\
				<td class="windLayerInfo" style="border-bottom: none;">\
					<input type="text" style="width:90%;" v-model="ditem.Comment"/>\
				</td>\
				<td class="windLayerInfo" style="border-bottom: none;">\
					<i class="icon-trash" style="cursor:pointer;" @click="handleDelete(ditem,didx)"></i>\
				</td>\
			</tr>\
			</table>\
			</td>\
			</tr>\
			<tr bgcolor="white" height="30px;">\
					<td colspan="2">\
						<a href="javascript:void(0);" @click.prevent="handleAdd($event)"><i class="icon-plus"></i>添加应收款</a>\
					</td>\
				</tr>\
			<tr bgcolor="white" height="40px;">\
					<td colspan="2" align="center">\
						<button type="button" class="pure-button pure-button-edit" @click.prevent="handleSubmit($event)">\
							<i class="icon-check"></i>确定\
						</button>\
						&nbsp;&nbsp;&nbsp;&nbsp;\
						<button type="button" class="pure-button" @click.prevent="doCancel">\
							<i class="icon-reply"></i>取消\
						</button>\
						&nbsp;\
					</td>\
				</tr>\
			</table>\
		</form>\
		<div class="windLayerFoot">\
			&nbsp;\
	</div>\
		<div class="windLayerCorner">\
			&nbsp;\
	</div>\
</div>'
});